$(()=>{

  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $perimeter = $('#perimeter'),
      $area = $('#area'),
      $widthValidate = $('#addWidth'),
      $heightValidate = $('#addHeight'),
      $form = $('#main');
  /*$form.focusout((e)=>{
    console.log(e.target);
  });校验字符多的时候用*/
    
  $width.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;

    if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key)){
      e.preventDefault();
    }
    //小数点
    if(key === '.'){
      if(pos === 0) e.preventDefault();
      if(val.indexOf('.') !== -1) e.preventDefault();
      if(pos >0 && /[-eE]/.test(val.slice(0,pos))) e.preventDefault();
    }
    //e
    if(key =='e'){
      if(pos === 0) e.preventDefault();
      if(val.indexOf('e') !==-1 || val.indexOf('E') !==-1) e.preventDefault();
      if(pos>0 && /[-.]/.test(val.slice(pos-1,pos))) e.preventDefault();
      if(val.slice(pos,val.length).indexOf('.') !== -1) e.preventDefault();
    }
    //-
    if(key == '-'){
      if(pos === 0) e.preventDefault();
      if(pos>0 && /[0-9.]/.test(val.slice(pos-1,pos))) e.preventDefault();
      if(pos>0 &&val.indexOf('-') !== -1) e.preventDefault();
    }

  });

  $height.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;
    if(/[abcdf-zABCDF-Z`~!@#$%^&*()=_+[\]{}|;:'",<>/?\\]/.test(key)){
      e.preventDefault();
    }
    //小数点
    if(key === '.'){
      if(pos === 0) e.preventDefault();
      if(val.indexOf('.') !== -1) e.preventDefault();
      if(pos >0 && /[-eE]/.test(val.slice(0,pos))) e.preventDefault();
    }
    //e
    if(key =='e'){
      if(pos === 0) e.preventDefault();
      if(val.indexOf('e') !==-1 || val.indexOf('E') !==-1) e.preventDefault();
      if(pos>0 && /[-.]/.test(val.slice(pos-1,pos))) e.preventDefault();
      if(val.slice(pos,val.length).indexOf('.') !== -1) e.preventDefault();
    }
    //-
    if(key == '-'){
      if(pos === 0) e.preventDefault();
      if(pos>0 && /[0-9.]/.test(val.slice(pos-1,pos))) e.preventDefault();
      if(pos>0 && val.indexOf('-') !== -1) e.preventDefault();
    }
  })

  $width.focusout(()=>{
    if(!validate($width, $widthValidate)){
      $width.select();
      $perimeter.val('');
      $area.val('');
    };
  });

  $height.focusout(()=>{
    if(!validate($height, $heightValidate)){
      $height.select();
      $perimeter.val('');
      $area.val('');
    };
  });
  
  $btnCal.click(()=>{
    let w = Number($width.val()),
        h = Number($height.val());
    /*let p = (w+h)*2,
        a = w*h;
    console.log(p,a)
    $perimeter.val(p);
    $area.val(a);*/
    if(validate($width, $widthValidate) && validate($height, $heightValidate)){
      let p = rf((w+h)*2,2),
          a = rf(w*h,2);
      //console.log(p);
      //console.log(a);
      $perimeter.val(p);
      $area.val(a);
    }else{
      $perimeter.val('');
      $area.val('');
    }
  })
      
});

function validate(input, output){
  //is empty

  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  }else if(isNaN(Number(input.val()))){
    output.html('该字段应为数值');
    return false;
  }else if((Number(input.val())) <= 0){
    output.html('该字段需为正数');
    return false;
  }else{
    output.html('');
    return true;
  }
}

function rf(x, n){
  return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
}
